const noSpace = {
  // 当被绑定的元素插入到DOM中时……
  inserted: function(el) {
    // 监听input事件
    el.addEventListener('input', function(e) {
      // 获取当前输入框的值
      let value = e.target.value

      // 移除空格
      // 注意：这里使用replace(/\s+/g, '')来移除所有空白字符，包括空格、制表符等
      // 如果你只想移除空格，可以使用replace(/\s/g, '')，但考虑到可能的需求，这里使用\s+
      let noSpaceValue = value.replace(/\s/g, '')

      // 如果值改变了（即原来包含空格），则更新输入框的值
      if (value !== noSpaceValue) {
        // 这里使用e.target.value = noSpaceValue; 也可以，但可能会引起一些不必要的DOM更新
        e.target.value = noSpaceValue
        // 使用Vue的$event.target.value = ... 是不推荐的，因为它不会触发Vue的响应式更新
        // 因此，我们采用另一种方式：通过v-model绑定的变量来控制
        // 假设你已经在父组件中通过v-model绑定了这个输入框的值
        // 这里只是演示如何直接操作DOM，实际项目中请通过数据绑定来控制
        // 注意：直接操作DOM不是Vue的推荐方式，这里只是为了演示自定义指令的用法
        // 在实际项目中，你应该通过v-model绑定的变量来控制输入，并在需要时通过计算属性或方法来过滤空格
        // 示例：如果确实需要直接操作（不推荐），可以这样做，但请确保这样做不会破坏你的数据绑定
        el.value = noSpaceValue // 这通常不会触发Vue的响应式更新
        // 更好的做法是在父组件中处理
        // 例如，在父组件的input事件处理函数中过滤空格，并更新绑定的变量
      }

      // 注意：上面的直接操作DOM方式并不推荐，因为Vue鼓励我们通过数据来驱动视图

      // 另一种思路：阻止默认事件，并手动设置值（但这需要额外的逻辑来保持光标位置等）
      // 这里不展开说明，因为直接操作DOM和阻止默认事件通常不是Vue的最佳实践
    })
  },
  // unbind(el) {
  //   el.removeEventListener('input')
  // }
}
export default noSpace
